<template>
  <div class="contentBox">
    <el-page-header @back="goBack" content="详情"> </el-page-header>
    <el-row :gutter="20" style="padding: 20px 0">
      <el-col :span="12"
        ><div class="imgBox">
          <img :src="item.photo" alt="" /></div
      ></el-col>
      <el-col :span="12"
        ><div class="">
          <el-form label-width="100px">
            <el-form-item label="简介：">
              {{item.detatil}}
            </el-form-item>
            <el-form-item label="烹饪特点：">
              <div class="tagGroup">
                <el-tag>麻辣</el-tag>
                <el-tag type="success">爆炒</el-tag>
                <el-tag type="warning">鲜美</el-tag>
              </div>
            </el-form-item>
            <el-form-item label="单价："
              ><span style="font-size: 25px; color: red; font-weight: 700">
                ￥{{item.price}}
              </span>
            </el-form-item>
          </el-form>
        </div></el-col
      >
    </el-row>
    <div class="comment">
      <div class="commentBtn">
        <el-input
          type="textarea"
          :rows="3"
          placeholder="请输入内容"
          v-model="comment"
          style="margin-right: 20px"
        >
        </el-input>
        <div style="display: flex; align-items: center">
          <el-button type="primary" @click="addEvaluate">发表评论</el-button>
        </div>
      </div>
      <h3 style="padding: 20px">共{{evaluateData.length}}条评论</h3>
      <div class="commentList">
        <div class="commentItem"  :span="0" v-for="(item, index) in evaluateData" :key="index">
          <div class="userName">
            匿名用户:
            <!-- <div style="color: #999; font-size: 12px">
              <i class="el-icon-time"></i>2020-12-05
            </div> -->
          </div>
          <div class="content">
            <div>{{item.evaluate}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  created() {
    this.item = this.$route.query.item;
    console.log( this.item.id)
    this.getEvaluateList();
  },
  data() {
    return {
      item:[],
      comment: "",
      evaluateData:[],
    };
  },
  methods: {
    //添加评论
    async addEvaluate() {
      let param = {
        evaluate:this.comment,
        menuId:this.item.id,
        phone:''
      }
      let {data:res} = await this.$http.post(`/banservice/evaluate/addevaluate`,
      param
      );
      if(res.code == 20000) {
          this.$message.success("发表成功");
          this.getEvaluateList();
          this.comment = '';
      }else {
          this.$message({
          message: res.msg,
          type: 'error'
      });
      }
      console.log(res);
    },
    //获取评论列表
    async getEvaluateList() {
      let {data:res} = await this.$http.get(`/banservice/evaluate/getevaluate/${this.item.id}`);
      this.evaluateData = res.data.list;
    },
    goBack() {
      //this.$router.push("/foodList?id=4");
    },
  },
};
</script>

<style lang="less" scoped>
.contentBox {
  .imgBox {
    width: 100%;
    height: 20vw;
    background-color: #eee;
    position: relative;
    overflow: hidden;
    img {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      transition: all 200ms;

      object-fit: cover;
    }
  }
  .tagGroup {
    .el-tag {
      margin: 0 6px;
    }
  }
  .comment {
    .commentBtn {
      display: flex;
      padding: 20px;
      padding-bottom: 50px;
      border-bottom: 2px solid #eee;
    }
    .commentList {
      padding: 0 20px;
      padding-bottom: 50px;
      .commentItem {
        display: flex;
        padding: 10px 0;
        border-bottom: 1px solid rgb(241, 241, 241);
        .userName {
          color: #e6a23c;
        }
        .content {
          padding-left: 20px;
        }
      }
    }
  }
}
</style>